<template>
	<view class="" style="padding-bottom: 220rpx;">
		<!-- </u-action-sheet> -->
		<u-toast ref="uToast"></u-toast>
		<view class="address_info">
			<view class="title">编辑地址信息</view>
			<u-form labelPosition="left" :model="addForm" ref="form1">
				<u-form-item label="姓名" prop="name" ref="item1" labelWidth="80" borderBottom>
					<u-input v-model="addForm.name" border="none" placeholder="请输入姓名"></u-input>
				</u-form-item>
				<u-form-item label="电话" prop="phone" ref="item1" labelWidth="80" borderBottom>
					<u-input v-model="addForm.phone" border="none" placeholder="请填写手机号码或固话"></u-input>
				</u-form-item>
				<!-- <u-form-item label="省市区" prop="addr.address" ref="item1" labelWidth="80" borderBottom>
					<picker mode='region' @change="chooseregion">
						<view class="flex flex_bet">
							<u-input v-model="addForm.addr.address" border="none" placeholder="请选择省市区" disabled  disabledColor="#ffffff"></u-input>
							<u-icon slot="right" name="arrow-down"></u-icon>
						</view>
					</picker>
				</u-form-item> -->
				<u-form-item label="地址" prop="addr.addressDeati" ref="item1" labelWidth="80" borderBottom>
					<u-input v-model="addForm.addr" border="none" placeholder="省市区街道门牌号详细地址"></u-input>
					<u-icon slot="right" name="map"></u-icon>
				</u-form-item>
				<u-form-item label="设置标签" prop="addressType" ref="item1" labelWidth="80">
					<uni-data-checkbox mode="tag" multiple max="1" v-model="addForm.addressType" :localdata="types"
						selectedColor="#3c9cff" selectedTextColor="#fff" deleteIcon></uni-data-checkbox>
				</u-form-item>
			</u-form>
		</view>
		
		<view class="footer flex flex_align">
			<u-button type="primary" shape="circle" text="立即保存" @click="getuserAddressEdit" customStyle="width:60%;"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		userAddressList,
		userAddressAdd,
		userAddressById,
		userAddressEdit,
		userAddressDelete
	} from '@/api/address.js'
	export default {
		data() {
			return {
				id:0,
				addForm:{
					name:'',
					phone:'',
					addr:'',
					addressType:''
				},
				discern:'', //识别
				types: [{
						text: '家',
						value: 1
					}, {
						text: '公司',
						value: 2
					}, {
						text: '学校',
						value: 3
				}],
				showCity: false,
			}
		},
		onLoad(option) {
			// console.log(option);
			this.id = option.id
			this.getuserAddressById(option.id)
		},
		methods:{
			checkMobile(phone){
			    var testPhone=/^(1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8})?$/;
			    var testFixedPhone=/^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;
			    // console.log(phoneReg,telReg);
			    if(!testPhone.test(phone) && !testFixedPhone.test(phone)){
						console.log('12');
						return false;//验证失败
			    }else {
						console.log('45');
						return true;//验证成功
			    }
			},
			//id获取信息
			getuserAddressById(id) {
				userAddressById({
					id: id
				}).then(res => {
					this.addForm = res.data
					this.addForm.addressType =[Number(res.data.tag)]
					console.log(res.data,'aaa');
					// this.cityShow = true
				})
			},
			//编辑地址信息
			getuserAddressEdit() {
				console.log('-----', this.id)
				if(this.checkMobile(this.addForm.phone)==false){
					return this.$refs.uToast.show({
							message: '请输入正确的手机号码！',
							type: 'error',
							icon: false
						})
				}
				if(this.checkMobile(this.addForm.phone)==false){
					return this.$refs.uToast.show({
							message: '请输入正确的手机号码！',
							type: 'error',
							icon: false
						})
				}
				if(this.addForm.addr==''){
					return this.$refs.uToast.show({
						message:"请填写完整信息！",
						type:'error',
						icon:false
					})
				} 
				
				let params = {
					id:this.id,
					name:this.addForm.name,
					phone:this.addForm.phone,
					addr:this.addForm.addr,
					tag:this.addForm.addressType[0]
				}
				console.log(params);
				userAddressEdit(params).then(res => {
					this.$refs.uToast.show({
						message: '修改成功',
						icon: false,
						type: 'success',
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1000)
					this.cityShow = false
				}).catch(err => {
					this.$refs.uToast.show({
						message: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			sj(){
				console.log('12222');
			}
		}
	}
</script>

<style lang="scss">
.address_info{
	background: #fff;
	padding: 40rpx;
	margin-top: 20rpx;
	.title{
		margin-left: -20rpx;
		margin-bottom: 10rpx;
		font-size: 28rpx;
	}
}
.u-form-item /deep/.u-line{
	width: calc(100% - 80px) !important;
	position: relative;
	right: -80px;
}
// .u-form-item:nth-last-child(1) /deep/.u-line{
// 	border: none !important;
// }
.discern{
	margin-top: 20rpx;
	background: #fff;
	padding: 20rpx 40rpx;
}
.discern_main{
	background: #f1f2f4;
	border-radius: 20rpx;
	margin-top: 20rpx;
	overflow: hidden;
	.fot{
		padding: 20rpx;
	}
}
	.footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 200rpx;
		line-height: 200rpx;
		background: #fff;
		box-shadow: 0 -1px 5px 3px #ddd;
	}
/deep/.checklist-box{
	padding: 4px !important;
	margin: 0 !important;
}
/deep/.uni-data-checklist .checklist-group{
	grid-template-columns: repeat(3, 20%) !important;
	grid-column-gap: 10px !important;
	justify-content:end;
}
/deep/.u-textarea{
	background: #f1f2f4 !important;
}
</style>
